<template>
  <div id="app">
    <div class="mod_playlist_tag mod_slide_box" id="taglist">
      <div class="playlist_tag_content">
        <div class="playlist_tag_ul" style="left: 0%">
          <!-- <div class="playlist_tag__list playlist_tag__list--lang">
            <h3 class="playlist_tag__tit c_tx_thin">最近常用</h3>
            <i class="playlist_tag__line"></i>
            <ul class="playlist_tag__tags">
              <li class="playlist_tag__itembox">
                <a class="playlist_tag__item js_tag">儿歌</a>
              </li>
              <li class="playlist_tag__itembox">
                <a class="playlist_tag__item js_tag">ACG</a>
              </li>
              <li class="playlist_tag__itembox">
                <a class="playlist_tag__item js_tag">轻音乐</a>
              </li>
              <li class="playlist_tag__itembox">
                <a class="playlist_tag__item js_tag">DJ神曲</a>
              </li>
            </ul>
          </div> -->
          <div
            class="playlist_tag__list"
            v-for="(item, index) in songCategoryList"
            :key="item.id"
          >
            <h3 class="playlist_tag__tit c_tx_thin">
              {{ item.categoryGroupName }}
            </h3>
            <i class="playlist_tag__line"></i>
            <ul class="playlist_tag__tags">
              <li
                class="playlist_tag__itembox"
                v-for="(agg, allsorts) in item.items"
                @click="getSongLists(agg.categoryId)"
              >
                <a class="playlist_tag__item js_tag">{{ agg.categoryName }}</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div
        class="popup_tag"
        style="display: none; max-width: 1200px; margin: 0px auto"
      >
        <ul class="playlist_tag__tags"></ul>
      </div>
      <!-- <div class="mod_slide_switch playlist_tag_switch">
        <a class="slide_switch__item slide_switch__item--current"
          ><i class="slide_switch__bg"></i><i class="icon_txt">1</i></a
        ><a class="slide_switch__item null"
          ><i class="slide_switch__bg"></i><i class="icon_txt">1</i></a
        >
      </div> -->
      <div class="mod_slide_action playlist_tag_action">
        <div class="slide_action slide_action--left">
          <a class="slide_action__btn slide_action__btn--left"
            ><i class="icon_txt">&lt;</i
            ><i class="slide_action__arrow slide_action__arrow--left sprite"></i
          ></a>
        </div>
        <div class="slide_action slide_action--right">
          <a class="slide_action__btn slide_action__btn--right"
            ><i class="icon_txt">&gt;</i
            ><i
              class="slide_action__arrow slide_action__arrow--right sprite"
            ></i
          ></a>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="mod_part_detail">
        <div class="part_detail__hd">
          <h2 class="part_detail__tit">推荐歌单</h2>
        </div>
        <div class="mod_playlist mod_playlist--all">
          <ul class="playlist__list" id="playlist_box">
            <li
              class="playlist__item slide__item"
              v-for="song in songImageList"
              :key="song.dissid"
            >
              <div class="playlist__item_box">
                <div class="playlist__cover mod_cover">
                  <a href="/n/ryqq/playlist/8180413148"
                    ><img
                      class="playlist__pic"
                      loading="lazy"
                      :src="song.imgurl"
                      :alt="song.dissname"
                      data-qar-def="//y.qq.com/mediastyle/global/img/playlist_300.png?max_age=2592000" /><i
                      class="mod_cover__mask"
                    ></i
                    ><i class="mod_cover__icon_play"></i
                  ></a>
                </div>
                <h4 class="playlist__title">
                  <span class="playlist__title_txt"
                    ><a href="/n/ryqq/playlist/8180413148">{{
                      song.dissname
                    }}</a></span
                  >
                </h4>
                <div class="playlist__author">
                  <a href="/n/ryqq/profile/like/song?uin=3303739770"
                    >综艺全能鹅</a
                  >
                </div>
                <div class="playlist__other">播放量：916.3万</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div id="page_box">
        <div class="client_guide">
          <p class="client_guide__txt">查看更多内容，请下载客户端</p>
          <a class="client_guide__btn">立即下载</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "SC",
};
import {
  getSongListCategoriesApi,
  getSongListsApi,
} from "@/api/songcategorylist";
import { onMounted, ref } from "vue";
</script>

<script lang="ts" setup>
onMounted(async () => {
  const res2 = await getSongListsApi(165);
  songImageList.value = res2.data.list;
  const res1 = await getSongListCategoriesApi();
  songCategoryList.value = res1.data.categories;

  // console.log(res.data.categories);
});

const songCategoryList = ref<any>([]);

const songImageList = ref<any>([]);
const getSongLists = async (id: number) => {
  const res = await getSongListsApi(id);
  songImageList.value = res.data.list;
  console.log(songImageList.value);
};
</script>

<style scoped>
/* 上 */
element.style {
}
.slide_action--left,
.slide_action__btn--left {
  left: 0;
}
.slide_action--right,
.slide_action__btn--right {
  right: 0;
}
.slide_action {
  width: 50%;
}
.mod_slide_action,
.slide_action {
  position: absolute;
  top: 0;
  height: 100%;
}

div {
  display: block;
}
body,
button,
input,
select,
textarea,
th {
  color: #000;
  background-color: #fff;
  font-size: 14px;
  line-height: 1.5;
  font-family: poppin, Tahoma, Arial, \5FAE\8F6F\96C5\9ED1, sans-serif;
  font-family: Tahoma, Arial, \5FAE\8F6F\96C5\9ED1, sans-serif, 9;
}
body ::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body ::-webkit-scrollbar-thumb {
  background-color: #ddd;
}
::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
.playlist_tag__list--lang {
  width: 160px;
}
.playlist_tag__list {
  position: relative;
  float: left;
  width: 238px;
  line-height: 26px;
  margin-right: 22px;
}
element.style {
  left: 0%;
}
.playlist_tag_ul {
  display: inline-flex;
  position: relative;
  transition: 1s;
  z-index: 2;
}
.c_tx_thin {
  color: #999;
}

blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
html,
input,
lengend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
  margin: 0;
  padding: 0;
}

h3 {
  display: block;
  font-size: 1.17em;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
.playlist_tag__itembox {
  float: left;
  width: 76px;
  margin-bottom: 4px;
}
li {
  list-style: none;
}
.playlist_tag__item {
  float: left;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 68px;
}
/* .playlist_tag__item--expand, .playlist_tag__item--expand:hover, .playlist_tag__item--select, .playlist_tag__item--select:hover {
    background-color: #31c27c;
    color: #fff;
} */
a,
a:hover {
  text-decoration: none;
}
a {
  color: #000;
  cursor: pointer;
}
.playlist_tag__itembox {
  float: left;
  width: 76px;
  margin-bottom: 4px;
}
li {
  list-style: none;
}
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
html,
input,
lengend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
  margin: 0;
  padding: 0;
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
}
.mod_playlist_tag {
  position: relative;
  padding-top: 60px;
  margin-right: -24px;
}
.playlist_tag_content {
  max-width: 1200px;
  overflow: hidden;
  margin: 0 auto;
}
.playlist_tag__item--expand .playlist_tag__arrow,
.playlist_tag__item--expand:hover .playlist_tag__arrow {
  background-position: -100px -260px;
}
.playlist_tag__item--select .playlist_tag__arrow,
.playlist_tag__item--select:hover .playlist_tag__arrow {
  background-position: -160px -260px;
}
.playlist_tag__item:hover .playlist_tag__arrow {
  background-position: -140px -260px;
}
.playlist_tag__line {
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 108px;
  background-color: #eeeef0;
}

.playlist_tag__item {
  float: left;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 68px;
}
/* .playlist_tag__item--expand, .playlist_tag__item--expand:hover, .playlist_tag__item--select, .playlist_tag__item--select:hover {
    background-color: #31c27c;
    color: #fff;
} */
.playlist_tag__item--select .playlist_tag__arrow,
.playlist_tag__item--select:hover .playlist_tag__arrow {
  background-position: -160px -260px;
}
.playlist_tag__arrow {
  display: inline-block;
  width: 10px;
  height: 6px;
  background-position: -120px -260px;
  margin-left: 3px;
  vertical-align: 1px;
}

element.style {
  display: none;
  max-width: 1200px;
  margin: 0px auto;
}
.popup_tag {
  position: absolute;
  top: 175px;
  left: 0;
  right: 24px;
  border: 1px solid #bfbfbf;
  background-color: #fff;
  padding: 19px 0 15px;
  z-index: 4;
  box-shadow: 0 0 10px hsl(0deg 0% 72% / 65%);
  border: 0;
}
.playlist_tag_switch {
  padding-top: 20px;
}
.mod_slide_switch {
  width: 100%;
  text-align: center;
  font-size: 0;
}
.mod_slide_action,
.slide_action {
  position: absolute;
  top: 0;
  height: 100%;
}
.mod_slide_action {
  left: 0;
  width: 100%;
  overflow: hidden;
}
.icon_txt {
  font: 0/0 a;
}
.slide_action__btn--left {
  transform: translateX(-100%);
}
a:hover {
  color: #31c27c;
}

.playlist__title_txt {
  line-height: 25px;
}

.client_guide__btn:hover {
  color: white;
  background-color: rgb(22, 157, 29);
}

/* 左右箭头 */
.mod_slide_box:hover .slide_action__btn {
  opacity: 1;
  visibility: none;
  transform: translateX(0);
  transition-property: opacity, transform, background, width;
  transition-duration: 1s;
}

.slide_action__btn:hover {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled="true",startColorstr="#19000000",endColorstr="#19000000");
  background: url(#);
  background: rgba(0, 0, 0, 0.1);
}

a,
a:hover {
  text-decoration: none;
}
.slide_action--left,
.slide_action__btn--left {
  left: 0;
}
.slide_action__btn--left {
  transform: translateX(-100%);
}
.slide_action__btn {
  position: absolute;
  top: 50%;
  margin-top: -54px;
  width: 79px;
  height: 108px;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled="true",startColorstr="#14000000",endColorstr="#14000000");
  background: url(#);
  background: rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: none;
  transition-property: opacity, transform;
  transition-duration: 1s;
  z-index: 4;
}
a {
  color: #000;
  cursor: pointer;
}
.slide_action__arrow--left {
  left: 29px;
  background-position: -20px -120px;
}
.slide_action__arrow--right {
  right: 29px;
  background-position: 0 -120px;
}
.slide_action__arrow {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 20px;
  height: 39px;
}
.sprite,
.sprite_before:before {
  background-image: url(./image/10001.png);
  background-image: -webkit-image-set(
    url(./image/10001.png) 1x,
    url(./image/10001.png) 2x
  );
}

i {
  font-style: italic;
}
.slide_switch__item {
  display: inline-block;
  width: 28px;
  height: 12px;
  padding: 0 0 26px;
  margin: 0 1px;
  background: transparent;
}

a,
a:hover {
  text-decoration: none;
}
a {
  color: #000;
  cursor: pointer;
}

/* 中 */
.main {
  z-index: 2;
}
.main,
.section_inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.mod_part,
.mod_part_detail {
  position: relative;
  margin-bottom: 30px;
}
.part__hd,
.part_detail__hd {
  overflow: hidden;
  height: 60px;
}
.part__tit,
.part_detail__tit {
  float: left;
  font-size: 24px;
  font-weight: 400;
  line-height: 58px;
}
.mod_playlist {
  margin-right: -20px;
}

.mod_playlist {
  overflow: hidden;
  font-size: 0;
}
.mod_playlist .playlist__list {
  margin-right: -20px;
}
.mod_playlist .playlist__item {
  display: inline-block;
  width: 20%;
  padding-bottom: 44px;
  overflow: hidden;
  font-size: 14px;
  vertical-align: top;
}

.mod_playlist .playlist__item_box {
  position: relative;
  margin-right: 20px;
}

.mod_playlist .playlist__title {
  overflow: hidden;
}
/* h1, h2, h3, h4, h5, h6 {
    font-size: 14px;
} */
.mod_playlist .playlist__author,
.mod_playlist .playlist__author a,
.mod_playlist .playlist__other {
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 22px;
  font-size: 14px;
}
.mod_playlist .playlist__cover {
  position: relative;
  display: block;
  overflow: hidden;
  /* padding-top: 100%; */
  margin-bottom: 15px;
}
.mod_cover {
  zoom: 1;
}
img.playlist__pic {
  width: 224px;
  height: 224px;
}
.playlist__cover .mod_cover:hover .mod_cover__icon_play,
.mod_cover__icon_play {
  background-image: url(./image/10003.png);
  background-image: -webkit-image-set(
    url(./image/10003.png) 1x,
    url(./image/10003.png) 2x
  );
}

.mod_cover__icon_play {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -35px;
  width: 70px;
  height: 70px;
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transform: scale(0.7) translateZ(0);
  -webkit-transition-property: opacity, -webkit-transform;
  -webkit-transition-duration: 0.7s;
  transform: scale(0.7) translateZ(0);
  transition-property: opacity, transform;
  transition-duration: 0.7s;
  zoom: 1;
}
.mod_cover:hover .mod_cover__icon_play {
  opacity: 1;
  filter: none;
  transform: scale(1.1) translateZ(0);
}
.mod_cover:hover .playlist__pic {
  -webkit-transform: scale(1.1) translateZ(0);
  transform: scale(1.1) translateZ(0);
  transition-duration: 0.7s;
  -webkit-transition-duration: 0.7s;
}
/* i {
  font-style: italic;
} */
/* h4 {
  display: block;
  margin-block-start: 1.33em;
  margin-block-end: 1.33em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
} */
/* 下 */
div {
  display: block;
}
.client_guide {
  margin-bottom: 22px;
  overflow: hidden;
}
.client_guide__txt {
  font-size: 18px;
  color: #000;
  text-align: center;
}
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
html,
input,
lengend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
  margin: 0;
  padding: 0;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.client_guide__btn {
  display: block;
  margin: 20px auto 0;
  width: 175px;
  height: 41px;
  line-height: 41px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  border-radius: 41px;
  background-color: #31c27c;
}
a,
a:hover {
  text-decoration: none;
}
a {
  color: #000;
  cursor: pointer;
}
</style>
